<template>

<div class="List">
    <div class="Lpic">
      <img :src="'bimg/'+item.pic" />
    </div>
    <div class="Lcenter">
      <p class="showtop" @click="go">{{item.title}}</p>
      <p class="showmain">{{item.ather}}</p>
      <p class="showmain">{{item.category}}</p>
    </div>
    <van-button square text="删除" type="danger" class="delete-button" @click="go(index)" />
</div>

</template>

<script>
export default {
  name: "debookshow",
  props: {
    msg: String,
    item: "",
    hidebook:true,
    show:true,
  },
  data() {
    return {
      active: "",
    };
  },
  methods: {
    go(){
      console.log(item)
     
    },
    read(){
      this.$router.push('/read')
    }
  },
  
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.bList,
.List {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  border-bottom: 0.01rem solid rgb(209, 201, 201);
}
.List img {
  height: 3rem;
  width: 80%;
  margin-left: 0.1rem;
}

.Lpic {
  display: flex;
  width: 30%;
  flex-direction: column;
}

.Lcenter {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 60%;
}

.Licon {
  align-self: center;
}
.showtop {
  font-size: 0.4rem;
  font-weight: 600;
}
.showmain {
  color: rgb(94, 79, 79, 0.6);
  font-size: 0.3rem;
  font-weight: 500;
}
.van-button--danger {
    color: #fff;
    background-color: #ee0a24;
    border: 1px solid #ee0a24;
    height: 3.5rem;
}
</style>